<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 健康个人资料数据
const healthProfile = ref({
  name: '张三',
  age: 30,
  gender: '男',
  height: 175,
  weight: 70,
  bmi: 22.9,
  bloodType: 'A型',
  allergies: ['青霉素', '海鲜'],
  chronicConditions: ['无'],
  emergencyContact: {
    name: '李四',
    relationship: '配偶',
    phone: '138****1234'
  },
  healthGoals: [
    '每周运动3-5次',
    '保持健康饮食',
    '改善睡眠质量',
    '定期体检'
  ],
  lastCheckup: '2023-12-15',
  nextCheckup: '2024-06-15'
})

// 编辑模式状态
const editing = ref(false)
// 临时存储编辑数据
const editData = ref({})

// 返回按钮功能
const goBack = () => {
  router.back()
}

// 计算BMI分类
const getBmiCategory = (bmi) => {
  if (bmi < 18.5) return '偏瘦'
  if (bmi < 24) return '正常'
  if (bmi < 28) return '超重'
  return '肥胖'
}

// 开始编辑
const startEditing = () => {
  // 深拷贝当前数据到临时编辑对象
  editData.value = JSON.parse(JSON.stringify(healthProfile.value))
  editing.value = true
}

// 保存编辑
const saveEditing = () => {
  // 计算新的BMI
  const newBmi = (editData.value.weight / ((editData.value.height / 100) ** 2)).toFixed(1)
  editData.value.bmi = parseFloat(newBmi)
  
  // 更新健康档案数据
  healthProfile.value = JSON.parse(JSON.stringify(editData.value))
  editing.value = false
  
  // 可以在这里添加保存到后端的逻辑
  alert('个人档案已更新！')
}

// 取消编辑
const cancelEditing = () => {
  editing.value = false
  // 清空临时编辑数据
  editData.value = {}
}

// 血型选项
const bloodTypeOptions = ['A型', 'B型', 'O型', 'AB型', '其他']

// 性别选项
const genderOptions = ['男', '女', '其他']
</script>

<template>
  <div class="health-profile-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      ← 返回
    </button>

    <!-- 页面标题和操作按钮 -->
    <div class="header-actions">
      <h1 class="page-title">个人健康档案</h1>
      <button v-if="!editing" class="edit-button" @click="startEditing">
        编辑档案
      </button>
    </div>

    <!-- 编辑模式的保存和取消按钮 -->
    <div v-if="editing" class="edit-actions">
      <button class="save-button" @click="saveEditing">保存</button>
      <button class="cancel-button" @click="cancelEditing">取消</button>
    </div>

    <!-- 基本信息卡片 -->
    <div class="profile-card">
      <h2 class="card-title">基本信息</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">姓名：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.name }}</span>
          <input v-else v-model="editData.name" type="text" class="info-input">
        </div>
        <div class="info-item">
          <span class="info-label">年龄：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.age }}岁</span>
          <input v-else v-model.number="editData.age" type="number" min="0" max="120" class="info-input">
        </div>
        <div class="info-item">
          <span class="info-label">性别：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.gender }}</span>
          <select v-else v-model="editData.gender" class="info-select">
            <option v-for="option in genderOptions" :key="option" :value="option">{{ option }}</option>
          </select>
        </div>
        <div class="info-item">
          <span class="info-label">血型：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.bloodType }}</span>
          <select v-else v-model="editData.bloodType" class="info-select">
            <option v-for="option in bloodTypeOptions" :key="option" :value="option">{{ option }}</option>
          </select>
        </div>
      </div>
    </div>

    <!-- 身体数据卡片 -->
    <div class="profile-card">
      <h2 class="card-title">身体数据</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">身高：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.height }}cm</span>
          <input v-else v-model.number="editData.height" type="number" min="50" max="250" class="info-input">
        </div>
        <div class="info-item">
          <span class="info-label">体重：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.weight }}kg</span>
          <input v-else v-model.number="editData.weight" type="number" min="10" max="300" class="info-input">
        </div>
        <div class="info-item" style="grid-column: 1 / -1;">
          <span class="info-label">BMI：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.bmi.toFixed(1) }} ({{ getBmiCategory(healthProfile.bmi) }})</span>
          <span v-else class="info-value readonly">{{ editData.bmi ? parseFloat(editData.bmi).toFixed(1) : healthProfile.bmi.toFixed(1) }} ({{ getBmiCategory(editData.bmi || healthProfile.bmi) }})</span>
        </div>
      </div>
    </div>

    <!-- 健康状况卡片 -->
    <div class="profile-card">
      <h2 class="card-title">健康状况</h2>
      <div class="info-section">
        <h3>过敏原</h3>
        <div v-if="!editing" class="tags-container">
          <span v-for="allergy in healthProfile.allergies" :key="allergy" class="tag allergy">
            {{ allergy }}
          </span>
        </div>
        <div v-else class="edit-tags-container">
          <input v-model="editData.allergiesInput" type="text" placeholder="输入过敏原，用逗号分隔" class="tags-input">
        </div>
      </div>
      <div class="info-section">
        <h3>慢性疾病</h3>
        <div v-if="!editing" class="tags-container">
          <span v-for="condition in healthProfile.chronicConditions" :key="condition" class="tag condition">
            {{ condition }}
          </span>
        </div>
        <div v-else class="edit-tags-container">
          <input v-model="editData.conditionsInput" type="text" placeholder="输入慢性疾病，用逗号分隔" class="tags-input">
        </div>
      </div>
    </div>

    <!-- 健康目标卡片 -->
    <div class="profile-card">
      <h2 class="card-title">健康目标</h2>
      <ul v-if="!editing" class="goals-list">
        <li v-for="(goal, index) in healthProfile.healthGoals" :key="index" class="goal-item">
          {{ index + 1 }}. {{ goal }}
        </li>
      </ul>
      <div v-else class="edit-goals-container">
        <textarea v-model="editData.goalsText" rows="4" placeholder="每行输入一个健康目标" class="goals-textarea"></textarea>
      </div>
    </div>

    <!-- 体检记录卡片 -->
    <div class="profile-card">
      <h2 class="card-title">体检记录</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">上次体检：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.lastCheckup }}</span>
          <input v-else v-model="editData.lastCheckup" type="date" class="info-input">
        </div>
        <div class="info-item">
          <span class="info-label">下次体检：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.nextCheckup }}</span>
          <input v-else v-model="editData.nextCheckup" type="date" class="info-input">
        </div>
      </div>
    </div>

    <!-- 紧急联系人卡片 -->
    <div class="profile-card">
      <h2 class="card-title">紧急联系人</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">姓名：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.emergencyContact.name }}</span>
          <input v-else v-model="editData.emergencyContact.name" type="text" class="info-input">
        </div>
        <div class="info-item">
          <span class="info-label">关系：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.emergencyContact.relationship }}</span>
          <input v-else v-model="editData.emergencyContact.relationship" type="text" class="info-input">
        </div>
        <div class="info-item" style="grid-column: 1 / -1;">
          <span class="info-label">电话：</span>
          <span v-if="!editing" class="info-value">{{ healthProfile.emergencyContact.phone }}</span>
          <input v-else v-model="editData.emergencyContact.phone" type="tel" class="info-input">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.health-profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  text-decoration: underline;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin: 20px 0 0;
  font-size: 28px;
  flex: 1;
}

.edit-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #218838;
}

.edit-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.save-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.save-button:hover {
  background-color: #218838;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.cancel-button:hover {
  background-color: #5a6268;
}

.profile-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  color: #34495e;
  margin-bottom: 20px;
  font-size: 20px;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-weight: 500;
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 5px;
}

.info-value {
  font-size: 16px;
  color: #2c3e50;
}

.info-value.readonly {
  color: #6c757d;
  font-style: italic;
}

.info-input,
.info-select {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  color: #2c3e50;
  background-color: white;
}

.info-input:focus,
.info-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.info-section {
  margin-bottom: 20px;
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-section h3 {
  font-size: 16px;
  color: #34495e;
  margin-bottom: 10px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.tag.allergy {
  background-color: #ffebee;
  color: #c62828;
}

.tag.condition {
  background-color: #e3f2fd;
  color: #1565c0;
}

.edit-tags-container,
.edit-goals-container {
  margin-bottom: 10px;
}

.tags-input,
.goals-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  color: #2c3e50;
  background-color: white;
}

.tags-input:focus,
.goals-textarea:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.goals-list {
  list-style: none;
  padding: 0;
}

.goal-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #2c3e50;
}

.goal-item:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .health-profile-container {
    padding: 15px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .edit-actions {
    flex-direction: column;
  }
  
  .save-button,
  .cancel-button {
    width: 100%;
  }
}
</style>